<template>
  <div class="show">
     <button @click="isShow = !isShow">显示/隐藏3</button>
     <!-- 定义name属性即让动画执行时也要用到这个name值  appear值为true则渲染dom时就加入动画效果-->
     <transition-group name="animate__animated animate__bounce" appear enter-active-class="animate__fadeInTopLeft" leave-active-class="animate__fadeOutRight">
        <h1 v-show="isShow" key="1">welcome!!</h1>
        <!-- <h1 v-show="!isShow" key="2">su liang</h1> -->
     </transition-group>
  </div>
</template>

<script>
import 'animate.css';
export default {
    name:"Test",
    data(){
        return {
            isShow:'true'
        }
    }
}
</script>

<style>
    .show h1{
        background-color: lightgreen;
    }
   
  
</style>